<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: rgba(255, 192, 182, 1);
            position: absolute;
            left: 0;
            opacity: 0;
        }
        .btn{
            position: absolute;
            top: 130px;
        }
    </style>
</head>
    <div class="box"></div>
    <button class="btn">运动</button>
<body>
    <script>
        // 封装一个函数 来获取非行内样式
        function getStyle(ele, attr) {
            var style;
            if (ele.currentStyle) {
                //  ele.currentStyle 包含 所有css样式的对象
                // obj.attr 获取 obj的 attr的属性
                style = ele.currentStyle[attr];
            } else {
                style = window.getComputedStyle(ele)[attr];
            }
            // 把获取的样式返回
            return style
        }
        var box = document.querySelector('.box')
        var btn = document.querySelector('.btn')
        function eleMove (ele,attr,callback){
            var speed;
            // 定义一个定时器的个数(长度)
            let timerLen = 0
            var opaCity;
            for(let key in attr){
                // 每进入一次 定时器加一
                timerLen++
                // 获取当前属性的值
                // 每次进来清除定时器，防止连续点击的时候事件叠加 加速 ，第一次进来的时候ele[key]为undefined所以不会报错
                clearInterval(ele[key])

                let nowStyle = parseInt(getStyle(ele,key))
                console.log(nowStyle)
                // 把定时器返回的地址赋给 ele[key],相当于建一个ele的属性存定时器
                ele[key] = setInterval(()=>{
                    if(key === 'opacity'){
                        nowStyle += 0.1
                        if(nowStyle >= 1){
                            nowStyle = 1
                        }
                        ele.style[key] = nowStyle
                    }else{
                        // 速度    目标值   -  当前值    /  系数  ，向上取整最终得到目标值
                        speed = Math.ceil((attr[key] - nowStyle ) / 5)
                        // 当前值加速度
                        nowStyle += speed
                        //  给元素的样式赋值 要中括号[key]，不能点key
                        ele.style[key] = nowStyle + 'px'
                    }
                    if(nowStyle === attr[key]){
                        clearInterval(ele[key])
                        // 每清除一个定时器 减一
                        timerLen--
                        // 如果定时器等于0就代表所有定时器运行结束
                        if(timerLen === 0){
                            // 回调函数，所有定时器运行结束后再调ele的其他样式
                            callback && callback(ele)
                        }
                    }
                    console.log(timerLen)
                // 因为每次点击都会清除定时器，所以要设置一个比较短的时间，否则连续点击的时候停止住
                },60)
               
            }
          
        }
        
        btn.onclick = function(){
            eleMove(box,{width:600,height:300,top:100,opacity:1},function(ele){
                ele.style.background = 'hotpink'
                
            })
        }
    </script>
</body>
</html>